<!--
 * @Description:
 * @Author: sunye
 * @Date: 2022-02-11 17:57:07
 * @LastEditTime: 2022-02-15 10:05:41
-->
<template>
  <div class="card-body">
    <div class="card-body-head">
      <div
        v-for="(item, index) in card2Headers"
        :key="index"
        :class="{ active: active2 === index }"
        @click="card2HeadersChange(index, item.value)"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="card-body-content">
      <div id="myChart72" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script>
import { top } from 'api/home.js'
export default {
  name: 'card',
  async mounted () {
    this.topCountry = await this.top('江苏省')
    this.label = this.topCountry.map(i => i.name)
    this.dataList = this.topCountry.map(i => Number(i.AQI).toFixed(2))
    this.drawLine()
  },
  data () {
    return {
      active2: 1,
      card2Headers: [
        {
          label: 'PM2.5',
          value: 'PM25'
        },
        {
          label: 'PM10',
          value: 'PM10'
        },
        {
          label: 'CO2',
          value: 'CO2'
        },
        {
          label: 'TSP',
          value: 'TSP'
        },
        {
          label: '噪音',
          value: '噪音'
        }
      ],
      topCountry: [],
      dataList: [],
      label: []
    }
  },
  methods: {
    top (province) {
      const data = {
        province
      }
      return top(data).then(res => {
        return res.result
      })
    },
    card2HeadersChange (index, value) {
      this.active2 = index
      this.dataList = this.topCountry.map(i => Number(i[value]).toFixed(2))
      this.drawLine()
    },
    drawLine () {
      let myChart = this.$echarts.init(document.getElementById('myChart72'))
      let option = {
        grid: {
          y: 20,
          y2: 20,
          x: 140,
          x2: 50,
          tooltip: {
            show: true
          }
        },
        tooltip: {
          show: true
        },
        xAxis: {
          type: 'value',

          axisLabel: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(68, 241, 255, 0.15)'
            }
          }
        },
        yAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          data: this.label,
          axisLabel: {
            color: '#BAE5E8'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(68, 241, 255, 0.15)'
            }
          }
        },
        series: [
          {
            type: 'bar',
            barWidth: '50%',
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(
                1, 0, 0, 0, // 渐变色在下面修改，这里是透明度
                [{
                  offset: 0,
                  color: 'rgba(1, 233, 189, 1)'

                },
                {
                  offset: 1,
                  color: 'rgba(14, 147, 253, 1)'
                }
                ]
              )
            },
            /* 显示柱子数据 */
            label: {
              // normal: {
              show: true,
              // 数据在柱子头部加载
              position: 'right',
              // textStyle: {
              color: '#BAE5E8'
              // fontSize: 14,
              // }
              // }
            },
            data: this.dataList
          }
        ]
      }
      // 绘制图表
      myChart.setOption(option)
    }
  }

}
</script>
